<template>
  <div class="main">
    <div class="main-echarts">
      <div class="project-info1">
        <div class="project-tabs">
          <span class="active">项目类型</span>
        </div>
        <div class="project-content">
          <div class="project-type">
            <div class="unit">单位：个</div>
            <div id="echarts-type" />
          </div>
        </div>
      </div>
      <div class="project-info2">
        <div class="project-tabs">
          <span class="active">项目状态</span>
        </div>
        <div class="project-content">
          <div class="project-state">
            <div class="unit">单位：个</div>
            <div id="echarts-state" />
          </div>
        </div>
      </div>
      <div class="contract">
        <div class="contract-tabs">
          <span class="active">工程合同大小分布</span>
        </div>
        <div class="contract-content">
          <div class="unit">单位：个</div>
          <div id="echarts-contract" />
          <div class="unit2">单位: (亿元)</div>
        </div>
      </div>
      <div class="scattergram">
        <div class="scattergram-tabs">
          <span class="active">工程地区分散图</span>
        </div>
        <div id="scattergram-content" />
      </div>
    </div>
    <div class="table">
      <div class="header">
        <el-form ref="ruleForm" :model="ruleForm">
          <el-row style="border-bottom:1px solid #ccc;">
            <el-col :span="6">
              <el-form-item label="项目经理" label-width="80px" prop="xmjj">
                <el-input v-model="ruleForm.xmjj" placeholder="搜索项目经理" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目名称" label-width="80px" prop="xmmc">
                <el-select v-model="ruleForm.xmmc" placeholder="搜索项目名称">
                  <el-option
                    v-for="item in tableData"
                    :key="item.objectID"
                    :label="item.xiangmmc"
                    :value="item.objectID"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目类别" label-width="80px" prop="xmlb">
                <el-input v-model="ruleForm.xmlb" placeholder="搜索项目类别" />
              </el-form-item>
            </el-col>
            <el-col :span="6" style="text-align: right" />
          </el-row>
          <el-row style="margin-top:5px">
            <el-col :span="6" :offset="18" style="padding-left: 110px;">
              <el-button type="primary" @click="sumbit(ruleForm)">查询</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table :data="tableData" style="width: 100%;" max-height="220" @row-click="handleClick">
        <el-table-column prop="xiangmjl" label="项目经理" sortable width="120" />
        <el-table-column prop="xiangmmc" label="项目名称" sortable width="210" />
        <el-table-column prop="yizsf" label="一主四辅" sortable width="120" />
        <el-table-column prop="zhuhtje" label="主合同金额" sortable width="120" />
        <el-table-column prop="xiangmszs" label="项目所在省" sortable width="120" />
        <el-table-column prop="xiangmlx" label="项目类型" sortable width="120" />
        <el-table-column prop="canjdw" label="参建单位" sortable width="120" />
        <el-table-column prop="xiangmzt" label="项目状态" sortable width="120" />
        <el-table-column prop="zhuhtgq" label="主合同工期" sortable width="120" />
        <el-table-column prop="xiangmxtwhllr" label="项目系统维护联络人" sortable width="160" />
        <el-table-column prop="zhuhtqdsj" label="主合同签订时间" sortable width="130" />
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 30, 40, 50]"
          :page-size="pageInfo.PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="DataCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import axios from 'axios'
import Global from '../../utils/Global.js'
import '@/utils/china.js'
const uplodadUrl = Global.uplodadUrl
export default {
  data() {
    return {
      typeData: [], // 类型
      typeLegendData: [],
      projectTotal: 0,
      statusData: [], // 状态
      statusLegendData: [],
      contractData: [], // 合同大小
      xAxisData: [],
      locationData: [], // 工程分布
      ruleForm: { // 查询条件
        xmjj: '',
        xmmc: '',
        xmlb: ''
      },
      tableData: [],
      DataCount: '',
      pageInfo: {
        PageIndex: 1,
        PageSize: 20
      }
    }
  },
  mounted() {
    this.getAllData()
  },
  methods: {
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    // 获取项目信息
    GetProjectInfo() {
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/ProjectBase/GetProjectInfo`
      }).then((res) => {
        console.log(res, '项目信息')
        this.tableData = res.data.data
        this.tableData.forEach(item => {
          if (item.zhuhtqdsj) {
            item.zhuhtqdsj = item.zhuhtqdsj.split('T')[0]
          }
        })
        this.DataCount = res.data.data.length
      })
    },
    // 查询
    sumbit(val) {
      console.log(val, '查询')
      // axios({
      //   method: 'get',
      //   url: `${uplodadUrl}/Pmsapi/ProjectBase/GetProjectInfo`
      // }).then((res) => {
      //   console.log(res, '项目信息')
      // })
    },
    handleClick(row, column, event) {
      console.log(row, column, event, '点击了某一行')
    },
    // 改变尺寸
    handleSizeChange(val) {
      this.pageInfo.PageSize = val
      // this.GetProjectInfo();
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.pageInfo.PageIndex = val
      // this.GetProjectInfo();
    },
    getAllData() {
      this.GetStatisticalDataGroupByProjectType()
      this.GetStatisticalDataGroupByProjectStatus()
      this.GetStatisticalDataGroupByProjectScale()
      this.GetStatisticalDataGroupByProjectLocation()
      this.GetProjectInfo()
    },
    // 获取项目类型数据
    GetStatisticalDataGroupByProjectType() {
      const _this = this
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetStatisticalDataGroupByProjectType`
      }).then((res) => {
        // console.log(res.data.data, '项目类型数据')
        _this.typeData = [] // 清空
        _this.typeLegendData = []

        res.data.data.forEach(item => {
          const obj = {}
          obj.name = item.yizsf
          obj.value = item.zongsl
          obj.money = item.zongje
          _this.typeData.push(obj)
          _this.typeLegendData.push(item.yizsf)
        })
        // console.log(_this.typeData, '处理后项目类型数据')
        _this.drawEchartsType()
      })
    },
    // 项目类型
    drawEchartsType() {
      // 基于准备好的dom，初始化echarts实例
      const _this = this
      const myChart = echarts.init(document.getElementById('echarts-type'))
      // 绘制图表
      myChart.setOption({
        // 图表显示颜色
        color: ['#FDDC4C', '#FF8F38', '#49ACF6', '#62D9AD', '#5A6B98', '#9DE0FC', '#c23531'].slice(0, _this
          .typeLegendData
          .length),
        legend: {
          orient: 'vertical',
          x: 'right', // 图例距离左的距离
          y: 'center', // 图例上下居中
          itemWidth: 7,
          itemHeight: 7,
          data: _this.typeLegendData
        },
        tooltip: {
          trigger: 'item',
          // formatter: "{b}<br/>数量：{c}个<br/>金额：{e}亿"
          formatter: function(params) {
            // console.log(params)
            return `<div style="width:112px;height:74px;background:#000000;border-radius:2px;opacity:0.7315;position:relative;padding:9px 10px 9px 25px">
            <div style="width: 7px;height:7px;background:#FDDC4C;border-radius:2px;position:absolute;top:15px;left:12px">
            </div>
            <div style="height: 18px;font-size:14px;font-weight:500;color:#fff;line-height:18px;">${params.data.name}</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">数量：${params.data.value}个</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">金额：${params.data.money}亿</div>
          </div>`
          }
        },
        series: [{
          type: 'pie',
          radius: ['0', '70%'],
          // 圆环位置
          center: ['40%', '40%'],
          // 防止标签重叠
          avoidLabelOverlap: true,
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: _this.typeData
        }]
      })
    },

    // 获取项目状态数据
    GetStatisticalDataGroupByProjectStatus() {
      const _this = this
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetStatisticalDataGroupByProjectStatus`
      }).then((res) => {
        // console.log(res.data.data, '项目状态数据')
        _this.statusData = [] // 清空
        _this.statusLegendData = []
        _this.projectTotal = 0
        res.data.data.forEach(item => {
          const obj = {}
          obj.name = item.xiangmzt
          obj.value = item.zongsl
          obj.money = item.zongje
          _this.projectTotal += item.zongsl
          _this.statusData.push(obj)
          _this.statusLegendData.push(item.xiangmzt)
        })
        // console.log(_this.statusData, '处理后项目类型数据')
        _this.drawEchartsStatus()
      })
    },
    // 项目状态
    drawEchartsStatus() {
      const _this = this
      const myChart2 = echarts.init(document.getElementById('echarts-state'))
      // 绘制图表
      myChart2.setOption({
        // 图表显示颜色
        color: ['#FDDC4C', '#FF8F38', '#62D9AD', '#5A6B98', '#9DE0FC'].slice(0, _this.statusLegendData.length),
        legend: {
          orient: 'vertical',
          x: 'right', // 图例距离左的距离
          y: 'center', // 图例上下居中
          itemWidth: 7,
          itemHeight: 7,
          data: _this.statusLegendData
        },
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            // console.log(params)
            return `<div style="width:112px;height:74px;background:#000000;border-radius:2px;opacity:0.7315;position:relative;padding:9px 10px 9px 25px">
            <div style="width: 7px;height:7px;background:#FDDC4C;border-radius:2px;position:absolute;top:15px;left:12px">
            </div>
            <div style="height: 18px;font-size:14px;font-weight:500;color:#fff;line-height:18px;">${params.data.name}</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">数量：${params.data.value}个</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">金额：${params.data.money}亿</div>
          </div>`
          }
        },
        series: [{
          type: 'pie',
          radius: ['50', '70%'],
          // 圆环位置
          center: ['40%', '40%'],
          // 防止标签重叠
          avoidLabelOverlap: true,
          label: {
            normal: { // normal 是图形在默认状态下的样式
              show: true,
              position: 'center',
              color: '#333',
              fontSize: 14,
              fontWeight: 400,
              formatter: '本年度\n\n共' + _this.projectTotal + '个' // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容，
            }
          },
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: _this.statusData
        }]
      })
    },

    // 获取合同大小分布数据
    GetStatisticalDataGroupByProjectScale() {
      const _this = this
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetStatisticalDataGroupByProjectScale`
      }).then((res) => {
        // console.log(res, '合同大小分布')
        _this.contractData = [] // 清空
        res.data.data.forEach(item => {
          const obj = {}
          obj.name = item.类型
          obj.value = item.数量
          _this.contractData.push(obj)
          _this.xAxisData.push(item.类型)
        })
        // console.log(_this.contractData, '处理后合同大小分布数据')
        _this.drawEchartsContract()
      })
    },
    drawEchartsContract() {
      const _this = this
      // 基于准备好的dom，初始化echarts实例
      const myChart4 = echarts.init(document.getElementById('echarts-contract'))
      // 绘制图表
      myChart4.setOption({
        color: ['#5AAEF3'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: '{b}亿元：{c}个'
        },
        grid: {
          left: '3%',
          right: '1%',
          top: '3%',
          containLabel: true
        },
        xAxis: [{
          name: '亿元',
          type: 'category',
          show: true,
          data: _this.xAxisData,
          axisTick: {
            show: false,
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          type: 'bar',
          barWidth: '40%',
          data: _this.contractData
        }]
      })
    },

    // 获取工程地区分散图
    GetStatisticalDataGroupByProjectLocation() {
      const _this = this
      axios({
        method: 'get',
        url: `${uplodadUrl}/Pmsapi/index/GetStatisticalDataGroupByProjectLocation`
      }).then((res) => {
        // console.log(res, '工程分布图')
        _this.locationData = [] // 清空
        res.data.data.forEach(item => {
          const obj = {}
          obj.name = item.xiangmszs
          obj.value = item.zongsl
          obj.money = item.zongje
          _this.locationData.push(obj)
        })
        // console.log(_this.locationData, '处理后工程分布图数据')
        _this.drawEchartsLocation()
      })
    },
    // 工程地区分散图
    drawEchartsLocation() {
      const _this = this
      const myChart3 = echarts.init(document.getElementById('scattergram-content'))
      // 绘制图表
      myChart3.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            // console.log(params)
            return `<div style="width:112px;height:74px;background:#000000;border-radius:2px;opacity:0.7315;position:relative;padding:9px 10px 9px 25px">
            <div style="width: 7px;height:7px;background:#fcf2a9;border-radius:2px;position:absolute;top:15px;left:12px">
            </div>
            <div style="height: 18px;font-size:14px;font-weight:500;color:#fff;line-height:18px;">${params.data.name}</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">数量：${params.data.value}个</div>
            <div style="height: 17px;font-size:12px;font-weight:400;color:#fff;line-height:17px;">金额：${params.data.money}亿</div>
          </div>`
          }
        },
        visualMap: {
          name: '数值范围',
          min: 0,
          max: 30,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#fcf2a9', 'yellow', '#f18e74']
          }
        },
        series: [{
          type: 'map',
          mapType: 'china', // 自定义扩展图表类型
          label: {
            show: false
          },
          data: _this.locationData
        }]
      })
    },
    // 随机颜色
    color16() {
      var r = Math.floor(Math.random() * 256)
      var g = Math.floor(Math.random() * 256)
      var b = Math.floor(Math.random() * 256)
      var color = '#' + r.toString(16) + g.toString(16) + b.toString(16)
      return color
    }
  }

}

</script>
<style lang="scss" scoped>
  .main {
    width: 100%;
    font-family: PingFangSC-Regular, PingFang SC;

    .main-echarts {
      width: 100%;
      height: 315px;
      background: #F7F7F7;
      display: flex;

      .project-info1 {
        height: 310px;
        flex: 1;
        background: #FFFFFF;

        .project-tabs {
          border-bottom: 1px solid #1468B7;
          padding-top: 7px;
          padding: 10px;

          span {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #909399;
            line-height: 22px;
            cursor: pointer;

          }

          .active {
            color: #333;
            font-weight: 600;
          }
        }

        .project-content {

          .project-type {
            .unit {
              width: 56px;
              height: 20px;
              font-size: 14px;
              margin-left: 13px;
              margin-top: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #3E3E3E;
              line-height: 20px;
            }

            #echarts-type {
              margin: 5px auto;
              width: 100%;
              height: 250px;

              &>div {
                z-index: 1
              }
            }
          }

        }
      }

      .project-info2 {
        flex: 1;
        height: 310px;
        margin-left: 10px;
        background: #FFFFFF;

        .project-tabs {
          border-bottom: 1px solid #1468B7;
          padding-top: 7px;
          padding: 10px;

          span {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #909399;
            line-height: 22px;
            cursor: pointer;

          }

          .active {
            color: #333;
            font-weight: 600;
          }
        }

        .project-content {

          .project-state {
            .unit {
              width: 56px;
              height: 20px;
              font-size: 14px;
              margin-left: 13px;
              margin-top: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #3E3E3E;
              line-height: 20px;
            }

            #echarts-state {
              margin: 5px auto;
              width: 100%;
              height: 250px;

              &>div {
                z-index: 1
              }
            }
          }

        }
      }

      .contract {
        flex: 1;
        height: 310px;
        margin-left: 10px;
        background: #FFFFFF;

        .contract-tabs {
          border-bottom: 1px solid #1468B7;
          padding-top: 7px;
          padding: 10px;

          span {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #909399;
            line-height: 22px;
            cursor: pointer;

          }

          .active {
            color: #333;
            font-weight: 600;
          }
        }

        .contract-content {
          position: relative;

          .unit {
            width: 56px;
            height: 20px;
            font-size: 14px;
            margin-left: 13px;
            margin-top: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #3E3E3E;
            line-height: 20px;
          }

          .unit2 {
            position: absolute;
            z-index: 999999;
            bottom: 43px;
            right: 4px;
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #3E3E3E;
            line-height: 20px;
          }

          #echarts-contract {
            margin: 5px auto;
            width: 100%;
            height: 250px;
          }
        }
      }

      .scattergram {
        flex: 1;
        height: 310px;
        margin-left: 10px;
        background: #FFFFFF;

        .scattergram-tabs {
          border-bottom: 1px solid #1468B7;
          padding-top: 7px;
          padding: 10px;

          span {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #909399;
            line-height: 22px;
            cursor: pointer;

          }

          .active {
            color: #333;
            font-weight: 600;
          }
        }

        #scattergram-content {
          width: 100%;
          height: 270px;
        }

      }

    }

    .table {
      margin-top: 5px;
    }
  }

</style>
